﻿@page "/uploads"

<h3>Upload 上传</h3>

<h4>通过点击或者拖拽上传文件</h4>

<p>
    由于上传组件上传文件的大小受后台程序、反向代理等诸多因素影响，相关文章请参阅 <a href="https://gitee.com/LongbowEnterprise/BootstrapBlazor/wikis/Upload%20%E7%BB%84%E4%BB%B6%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9?sort_id=2166580" target="_blank">Upload 组件注意事项</a>
    <br>出于服务器安全考虑，以下组件示例中上传文件均限制为文件类型必须为 <code>image/*</code> ，文件大小被限制为不能超过 <code>20 MB</code>
</p>

<p>
    上传组件需要设置上传接收的接口，如果未设置时上传默认使用 <code>api/Upload</code> 的 <code>Post</code> 方法，删除使用 <code>Delete</code> 方法
</p>

<Block Title="直接上传" Introduction="通过点击上传框弹出文件选择框，选择文件后上传，上传成功后右上角出现绿色小对勾" CodeFile="upload.1.txt">
    <p>仅允许上传 <code>images/*</code> 格式文件，文件大小不能超过 <code>20 MB</code></p>
    <Upload AllowFileType="@AllowFiles" MaxFileLength="20971520" OnUploaded="@OnUpload" OnRemoved="@OnRemoved"></Upload>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="预览后上传" Introduction="通过设置 <code>ShowPreview</code> 属性开启本地预览，点击上传按钮开始上传" CodeFile="upload.2.txt">
    <p>仅允许上传 <code>images/*</code> 格式文件，文件大小不能超过 <code>20 MB</code></p>
    <Upload AllowFileType="@AllowFiles" MaxFileLength="20971520" ShowPreview="true" OnUploaded="@OnPreviewUpload"></Upload>
    <Logger @ref="PreviewUpload" class="mt-3" />
</Block>

<Block Title="头像框上传组件" Introduction="通过设置 <code>IsCircle</code> 属性使图片框显示为圆形，上传时显示圆形进度条，上传完毕后进度条变为蓝色" CodeFile="upload.3.txt">
    <p>仅允许上传 <code>images/*</code> 格式文件，文件大小不能超过 <code>20 MB</code></p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-auto">
                <Upload AllowFileType="@AllowFiles" MaxFileLength="20971520" IsCircle="true"></Upload>
            </div>
            <div class="form-group col-6 col-sm-auto">
                <div class="upload is-circle">
                    <div class="upload-prev is-valid" style="width: 100px; height: 100px;">
                        <img src="images/fork.png">
                        <span class="upload-item-actions">
                            <span class="upload-item-delete">
                                <i class="fa fa-trash-o"></i>
                            </span>
                        </span>
                        <svg class="upload-item-circle" style="width: 100px; height: 100px;">
                            <circle r="48" cy="50" cx="50" stroke-width="2" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"></circle>
                            <circle class="upload-item-circle-progress" r="48" cy="50" cx="50" data-dash="314.16" stroke-dashoffset="0" stroke-dasharray="314.16,314.16" stroke-width="2" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none"></circle><!--!-->
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</Block>

<Block Title="设置上传文件格式" Introduction="通过设置 <code>AllowFileType</code> 与 <code>MaxFileLength</code> 属性开启文件类型或者文件大小过滤功能" CodeFile="upload.4.txt">
    <p>仅允许上传 <code>images/*</code> 格式文件，文件大小不能超过 <code>20 MB</code></p>
    <Upload AllowFileType="@AllowFiles" MaxFileLength="20971520"></Upload>
</Block>

<Block Title="照片墙功能" Introduction="通过设置 <code>IsPhotoWall</code> 属性开启照片墙效果，文件检查合规后自动出现下一个照片上传组件" CodeFile="upload.5.txt">
    <p>仅允许上传 <code>images/*</code> 格式文件，文件大小不能超过 <code>20 MB</code></p>
    <Upload AllowFileType="@AllowFiles" MaxFileLength="20971520" IsPhotoWall="true"></Upload>
</Block>

<Block Title="圆形照片墙功能" Introduction="通过设置 <code>IsPhotoWall</code> 和 <code>IsCircle</code> 属性开启照片墙效果，文件检查合规后自动出现下一个照片上传组件" CodeFile="upload.6.txt">
    <p>仅允许上传 <code>images/*</code> 格式文件，文件大小不能超过 <code>20 MB</code></p>
    <Upload AllowFileType="@AllowFiles" MaxFileLength="20971520" IsPhotoWall="true" IsCircle="true"></Upload>
</Block>

<Block Title="卡片式预览" Introduction="通过设置 <code>IsCard</code> 属性开启卡片式照片预览效果" CodeFile="upload.7.txt">
    <p>允许上传任意格式文件，文件大小不能超过 <code>20 MB</code></p>
    <Upload MaxFileLength="20971520" Width="240" Height="280" IsCard="true" IsPhotoWall="true"></Upload>
</Block>

<Block Title="多选文件" Introduction="通过设置 <code>IsMultiple</code> 属性开启上传文件多选功能" CodeFile="upload.8.txt">
    <p>允许上传任意格式文件，文件大小不能超过 <code>20 MB</code></p>
    <Upload MaxFileLength="20971520" Width="240" Height="280" IsCard="true" IsMultiple="true"></Upload>
</Block>

<Block Title="卡片式文件上传进度" Introduction="通过设置 <code>IsCard</code> <code>ShowProgress</code> 属性开启卡片式文件上传进度预览功能" CodeFile="upload.9.txt">
    <p>允许上传任意格式文件，文件大小不能超过 <code>20 MB</code></p>
    <Upload MaxFileLength="20971520" Width="240" Height="280" IsCard="true" ShowProgress="true"></Upload>
</Block>

<Block Title="堆栈式文件上传进度" Introduction="通过设置 <code>IsStack</code> <code>ShowProgress</code> 属性开启堆栈式文件上传进度预览功能，适合大文件上传，文件大于 <code>1 MB</code> 后开始上传速率显示" CodeFile="upload.10.txt">
    <p>允许上传任意格式文件，文件大小不能超过 <code>20 MB</code>，可多选</p>
    <Upload MaxFileLength="20971520" IsStack="true" ShowProgress="true" Text="点击选择文件"></Upload>
</Block>

<AttributeTable Items="@GetAttributes()" />
